<template>
  <el-row class="warp">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>

    <el-col :span="24" class="warp-main">
    <!--工具条-->
      <el-col :span="24" class="query-form">
        <el-form :inline="true" :model="filters">
        <el-form-item>
            <el-input v-model="filters.name" placeholder="用户名/姓名/昵称" style="min-width: 240px;" @keyup.enter.native="handleSearch"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
        </el-form>
      </el-col>

      <!--列表-->
      <el-table :data="users" highlight-current-row border v-loading="loading" style="width: 100%;" element-loading-text="拼命加载中">
        <el-table-column prop="id" label="#" width="60">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120" sortable>
        </el-table-column>
        <el-table-column prop="nickname" label="昵称" width="120" sortable>
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable>
        </el-table-column>
        <el-table-column prop="email" label="邮箱" min-width="160" sortable>
        </el-table-column>
        <el-table-column prop="addr" label="地址" sortable>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button @click="showEditDialog(scope.row,'editForm')" type="text" size="small"><i class="el-icon-edit"></i> 编辑</el-button>
            <el-button @click="destory(scope.row)" type="text" size="small"><i class="el-icon-delete"></i> 删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-col :span="24" class="pagination">
        <div class="block pagination-wrap">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="10"
            layout="prev, pager, next, jumper"
            :total="200">
          </el-pagination>
        </div>
      </el-col>
    </el-col>

    <!--编辑panel-->
    <el-dialog title="编辑" :visible.sync ="editFormVisible" :close-on-click-modal="false">
      <el-form :model="editForm" label-width="100px" :rules="editFormRules" ref="editForm">
        <el-form-item label="名字" prop="name">
          <el-input v-model="editForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="nickname">
          <el-select v-model="editForm.nickname" placeholder="请选择类型">
            <el-option label="超级管理员" value="超级管理员"></el-option>
            <el-option label="普通管理员" value="普通管理员"></el-option>
            <el-option label="普通用户" value="普通用户"></el-option>
            <el-option label="访客" value="访客"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="editForm.sex" size="mini">
            <el-radio-button v-model="editForm.sex" label="1">男</el-radio-button>
            <el-radio-button v-model="editForm.sex" label="0">女</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email" placeholder="请输入邮箱地址"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="addr">
          <el-input type="textarea" v-model="editForm.addr" auto-complete="off" :rows="5"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="editSubmit('editForm')">提交</el-button>
      </div>
    </el-dialog>
  </el-row>
</template>

<style>
.pagination{ background: #FFF;margin-top: 5px; }
.pagination-wrap{ float: right; }
.pagination-wrap .el-pagination{font-weight: normal}
</style>

<script>
export default {
  data () {
    return {
      filters: {
        name: ''
      },
      currentPage: 1,
      loading: true,
      users: [],

      // 编辑相关数据
      editFormVisible: false, // 编辑界面是否显示
      editFormRules: {
        name: [
          {required: true, message: '请输入名称', trigger: 'blur'}
        ],
        nickname: [
          {required: true, message: '请输选择类型', trigger: 'blur'}
        ],
        sex: [
          {required: true, message: '请输选择性别', trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请输入邮箱地址', trigger: 'blur'}
        ],
        addr: [
          {required: true, message: '输入居住地址', trigger: 'blur'}
        ]
      },
      editForm: {
        id: 0,
        name: '',
        nickname: '',
        email: '',
        sex: 1,
        addr: ''
      }
    }
  },
  methods: {
    formatSex: function (row) {
      return row.sex === 1 ? '男' : row.sex === 0 ? '女' : '未知'
    },
    handleSearch () {
      // console.log('handleSearch');
      // this.search();
    },
    destory (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let that = this
        that.loading = true
        let t = setTimeout(() => {
          that.users = that.users.filter((item) => {
            return item.id !== row.id
          })
          that.loading = false
          clearTimeout(t)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }, 300)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      var that = this
      that.loading = true
      var t = setTimeout(() => {
        that.initData(function () {
          that.loading = false
        })
        clearTimeout(t)
      }, 300)
    },
    handleCurrentChange (val) {
      var that = this
      that.loading = true
      var t = setTimeout(() => {
        that.initData(function () {
          that.loading = false
        })
        clearTimeout(t)
      }, 300)
      console.log(`当前页: ${val}`)
    },
    initData (callback) {
      let currentPage = this.currentPage
      this.users = Array.from(new Array(10), (v, i) => {
        let id = (currentPage - 1) * 10 + i
        return {id: id, name: '你的名字', nickname: '普通管理员', sex: Math.floor(Math.random() * 10) % 2, email: 'yourname@qq.com', addr: '北京市海淀区上地七街'}
      }
      )
      if (callback) {
        callback()
      }
    },
    // 显示编辑界面
    showEditDialog: function (row) {
      console.log(row)
      this.editFormVisible = true
      this.editForm = Object.assign({}, row)
      if (this.$refs.editForm) {
        this.$refs.editForm.resetFields()
      }
    },
    editSubmit (formName) {
      console.log(this.editForm)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var row = this.editForm
          var that = this
          that.loading = true
          this.editFormVisible = false
          var t = setTimeout(() => {
            that.loading = false
            that.users = this.users.map(item => {
              return item.id === row.id ? row : item
            })
            clearTimeout(t)
            this.$message({
              type: 'success',
              message: '编辑成功!'
            })
          }, 300)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  },
  mounted () {
    var that = this
    var t = setTimeout(() => {
      that.loading = false
      that.initData()
      clearTimeout(t)
    }, 1000)
  }
}
</script>
